<template>
    <div class="formInfo">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="表单属性" name="first">
                <el-form
                        label-position="top"
                        label-width="100px"
                        style="max-width: 460px"
                >
                    <el-form-item label="表单名称:">
                        <el-input v-model="formInfo.formName"></el-input>
                    </el-form-item>
                    <el-form-item label="表单接口:">
                        <el-input v-model="formInfo.api"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <component :is="eleInfo.componentType + 'Info'" v-if="eleInfo" :eleInfo="eleInfo"/>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import inputInfo from "@/components/customForm/info/inputInfo.vue";
    import selectInfo from "@/components/customForm/info/selectInfo.vue";
    import radioInfo from "@/components/customForm/info/radioInfo.vue";
    import checkboxInfo from "@/components/customForm/info/checkboxInfo.vue";
    import uploadInfo from "@/components/customForm/info/uploadInfo.vue";
    export default defineComponent({
        name: 'formInfo',
        components:{inputInfo,selectInfo,radioInfo,checkboxInfo,uploadInfo},
        props:{
            eleInfo:{
              type:Object
            },
            formInfo:{
              type:Object
            }
         },
        setup() {
            const activeName = ref('first')
            const name = ref('')
            return {name,activeName};
        },
    });
</script>
